<template>
  <section>
    <van-sticky>
      <PageHeader title="会员管理" />
    </van-sticky>

    <van-tabs v-model="type" sticky @click="onTabChange">
      <van-tab title="会员管理" name="member">

      </van-tab>

      <van-tab title="交友申请" name="friend_apply">
        <van-list
          class="mt10"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="requestData">
          <div class="flex flex-col bg-color-white mt10 ml10 mr10 round-box"
               v-for="(item, index) in dataList"
               :key="index">
            <div class="flex flex-row flex-left flex-centerV pb10 pt10 pl10 pr10 font-big">
              <span>申请人：</span>
              <a :href="item.apply_member ? (BASE_MP_URL + 'member_profile?id=' + item.apply_member.id) : 'javascript:;'" target="_blank" class="dark">
                <img :src="item.apply_user.avatar_url" class="user-avatar" />{{item.apply_user.nick}}
              </a>
            </div>

            <div class="flex flex-row flex-left flex-centerV pb10 pt10 pl10 pr10 font-big">
              <span>被申请人：</span>
              <a :href="item.receiver_member ? (BASE_MP_URL + 'member_profile?id=' + item.receiver_member.id) : 'javascript:;'" target="_blank" class="dark">
                <img :src="item.receiver_user.avatar_url" class="user-avatar" />{{item.receiver_user.nick}}
              </a>
            </div>

            <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray">{{item.type_label}}</div>
            <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray">状态：{{item.status_label}}</div>
            <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray" v-if="item.remark">说明：{{item.remark}}</div>
            <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray color-gray-dark">申请时间：{{item.apply_time|timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>
            <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray color-gray-dark" v-if="item.audit_time > 0">审核时间：{{item.audit_time|timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>
            <div class="flex flex-row flex-center" v-if="item.audit_time == 0">
              <div class="flex flex-row flex-center flex-1 bg-color-orange color-white pt10 pb10"
                   style="border-bottom-left-radius: 8px;" @click="audit(index, 'reject')">
                拒绝
              </div>

              <div class="flex flex-row flex-center flex-1 bg-color-green color-white pt10 pb10"
                   style="border-bottom-right-radius: 8px;" @click="audit(index, 'pass')">
                通过
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>

      <van-tab title="投诉管理" name="complaint"></van-tab>
    </van-tabs>

    <van-dialog v-model="rejectFormVisible" title="拒绝申请" show-cancel-button @confirm="onRejectFormConfirm">
      <form action="/">
        <van-field
          v-model="rejectForm.remark"
          name="remark"
          label="说明"
          placeholder="请输入说明"
          type="textarea"
        />
      </form>
    </van-dialog>

  </section>
</template>

<script>
import {
  BASE_MP_URL,
  BASE_STATIC_URL,
  memberProfileExchangeApplyAuditUri,
  memberProfileExchangeApplyListsUri
} from "../../../common/api";
import PageHeader from "../../componets/PageHeader";

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      BASE_STATIC_URL: BASE_STATIC_URL,
      BASE_MP_URL: BASE_MP_URL,
      currentPage: 1,
      lastPage: 0,
      total: 0,
      pageSize: 10,
      loading: false,
      finished: false,
      dataList: [],
      keywords: '',

      type: 'friend_apply',

      rejectFormVisible: false,
      rejectForm: {index: -1, remark: ''}
    }
  },
  methods: {
    onTabChange(name) {
      if(name == 'member') {
        this.$router.replace({name: 'MemberLists'});
      } else if(name == 'complaint') {
        this.$router.replace({name: 'MemberComplaintLists'});
      }
    },
    requestData() {
      const that = this;
      this.loading = true;
      const url = memberProfileExchangeApplyListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.loading = false;
          if (that.currentPage >= data.last_page) {
            that.finished = true;
          }
          that.currentPage = that.currentPage + 1;
          for (let i = 0; i < data.data.length; i++) {
            that.dataList.push(data.data[i]);
          }
          that.total = data.total;
          that.lastPage = data.last_page;
        }
      }, response => {
        // error callback
      })
    },
    audit(index, status) {
      if(status == 'reject') {
        this.rejectForm.index = index;
        this.rejectFormVisible = true;
        return;
      }
      const item = this.dataList[index];
      const that = this;
      const url = memberProfileExchangeApplyAuditUri + '?id=' + item.id + '&status=' + status;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.$set(that.dataList, index, data.apply);
        }
      }, response => {
        // error callback
      })
    },
    onRejectFormConfirm() {
      if(this.rejectForm.remark.length == 0) {
        this.$toast('请输入拒绝的理由');
        return;
      }
      this.rejectFormVisible = false;
      const index = this.rejectForm.index;
      const postData = {
        id: this.dataList[index].id,
        status: 'reject',
        remark: this.rejectForm.remark
      };
      const that = this;
      that.$http.post(memberProfileExchangeApplyAuditUri, postData, {emulateJSON: true}).then(response => {
        let {msg, code, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.$set(that.dataList, index, data.apply);
        }
      }, response => {
        that.toast('发生错误');
      })
    },
  },
  mounted: function () {

  }
}
</script>

<style scoped>
.user-avatar {
  height: 20px;
  width: 20px;
  border-radius: 10px;
}
</style>
